{% extends 'master.html' %}
{% block main %}
{% raw %}
    <div class="toobox" id="report">
        <p>
        望远镜 <input class="tel"  name="tel"  type="text" v-model="tel" />
        验证码 <input class="pswd" name="pswd" type="password" v-model="pswd" />
        </p>
    </div>    
    <div class="toobox" id="news">
        <h4>望远镜最新状态 </h4>
        <p>
            <button class="btn" @click="loadnews" title="刷新">↺</button>
            <input type="radio" v-model="newstel" id="showone" name="newsall" value="one" @change="loadnews" />
            <label for="showone">最新</label>
            <template v-for="t,c in telall">
            &nbsp;
            <input type="radio" v-model="newstel" name="newstel" :value="c" :id="'show'+c" @change="loadnews" />
            <label :for="'show'+c">{{t}}</label>
            </template>
        </p>
        <div>
            <span class="teltel"   >望远镜</span>
            <span class="teltime"  >报告时间</span>
            <span class="telstatus">状态</span>
            <span class="telterm"  >终端</span>
            <span class="telopinfo">观测助手</span>
        </div>
        <div v-for='t in news' :class="'trtr tr'+t.status">
            <span class="teltel"   >{{telall[t.tel]}}</span>
            <span class="teltime"  >{{t.time}}</span>
            <span class="telstatus">{{statusall[t.status]}}</span>
            <span class="telterm"  >{{t.term}}</span>
            <span class="telopinfo">{{t.op}}</span>
        </div>
        <div v-if="news.length==0" >
            <span class="telnote">暂无状态</span>
        </div>
    </div>    
{% endraw %}
{% endblock %}

{% block code %}
<script>
    const app = {
        data() { return {
            tel: "{{tel}}",
            pswd: "{{pswd}}",
            telall: {{telall | safe}},
            statusall: {{statusall | safe}},
            news: [],
            newstel: "one",
            timerId: null,  // 定时器ID
        } }, // data
        
        computed: {
        }, // computed
        
        methods: {
            loadnews: function() {
                data = new FormData()
                data.append('tel', this.tel)
                data.append("pswd", this.pswd)
                data.append("show", this.newstel)
                act = this.newstel == "one" ? "./news" : "./last"
                axios
                    .post(act, data)
                    .then( response => {
                        this.news = eval(response.data)
                        console.log(response.data)
                    } )
                    .catch( function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            
            startTimer() {
                this.timerId = setInterval(() => {
                    // console.log('定时任务'); // 这里写需要执行的操作或者调用其他方法
                    this.loadnews()
                }, 5*60*1000);
            },
            stopTimer() {
                clearInterval(this.timerId); // 清除定时器
            }


        }, //methods

        mounted() {
            this.loadnews()
            this.startTimer(); // 页面加载完成后开始计时器
        }, // mounted
        beforeDestroy() {
            this.stopTimer(); // 组件被销毁前先清除定时器
        }
    } //app

    Vue.createApp(app).mount('#toomain')
</script>
{% endblock %}
